@extends('backend::layout')
@section('title',$page_title)
@push('styles')
    <link href="//at.alicdn.com/t/font_1365598_t1q6a8gmjcd.css" rel="stylesheet">
    <link href="{{asset(config('view.plugin').'/orgchart/css/jquery.orgchart.css')}}" rel="stylesheet">
    <link href="{{asset(config('view.plugin').'/orgchart/css/style.css')}}" rel="stylesheet">
@endpush
@section('content')
    <div class="row match-height">
        @component('backend::component.tab')
            @slot('tabs')
                <li class="nav-item">
                    <a class="nav-link active"
                       href=""
                    >
                        <i class="hcl hcl-shu mr-2"></i>节点关系
                    </a>
                </li>
            @endslot
            <div  class="tab-pane active show">
                @component('backend::component.form.input-group')
                    @slot('attr') style=width:450px;display:inline-flex @endslot
                    `                    @slot('input')
                        @component('backend::component.form.input')
                            @slot('name') user @endslot
                            @slot('value') {{request()->input('user','')}} @endslot
                        @endcomponent
                    @endslot
                    @slot('button')
                        @component('backend::component.form.button')
                            @slot('title') 查找 @endslot
                            @slot('size') sm @endslot
                            @slot('attr') id=searchBtn data-target=user @endslot
                        @endcomponent

                    @endslot
                @endcomponent
                    <div id="chart-container"></div>
            </div>
        @endcomponent
    </div>
@endsection
@push('scripts')
    <script src="{{asset(config('view.plugin').'/orgchart/js/jquery.orgchart.js')}}"></script>


    <script type="text/javascript">
        $(function() {

            var datascource = <?= $datascource ?>;

            var ajaxURLs = {
                'children': "{{route('b_User_nodechildren')}}"+"/",
            };

            $('#chart-container').orgchart({
                'data' : datascource,
                'ajaxURL': ajaxURLs,
                'nodeContent': 'title',
                'nodeId': 'id',
                'pan':true,
                'zoom':true
            });
        });
    </script>
    <script type="text/javascript">
        $("#searchBtn").off('click').click(function(){
            var value = $('input[name="user"]').val();
            if(value){
                window.location.href = handleUrl({user:value});
            }
        });
        function handleUrl(newData,url) {
            var url = url||window.location.href;
            if(!newData || newData == '' || newData == undefined){
                return  url;
            }
            var hostName = url;
            if(url.indexOf("?") >= 1){
                var urlArr = url.split('?')
                hostName = urlArr[0];
                var paramsObj = urlToArr(urlArr[1]);
                if(paramsObj){
                    $.extend(paramsObj,newData)
                }
            }else{
                paramsObj = newData;
            }
            return  hostName+"?"+jQuery.param(paramsObj);
        }
        function urlToArr(uri) {

            uri = decodeURIComponent(uri);
            //拼接数组
            var arrUrl = uri.split('&');
            var urlObj = {};
            var len = arrUrl.length;
            for (var i=0; i<len; i++){
                if(arrUrl[i].indexOf('=')>=1){
                    var params = arrUrl[i].split('=');
                    if(params[0]!=''&&params[1]!=''){
                        urlObj[params[0]] = params[1];
                    }
                }
            }
            return $.isEmptyObject(urlObj)?false:urlObj;
        }

    </script>
@endpush